<template>
  <div>
    <div style="display: flex">
      <company-select v-if="this.$store.state.user.myInfo.company_type === 'platform'" @companySelectChange="companySelectChange" />
      <search @search="search" />
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="tableHeaderStyle"
      :row-class-name="tableRowClassName"
      height="70vh"
    >
      <el-table-column
        prop="name"
        label="站点名称"
      />
      <el-table-column
        prop="company_name"
        label="公司"
      />
      <el-table-column
        prop="enable_time"
        label="投运时间"
      />
      <el-table-column
        prop="area"
        label="区域"
      />
      <el-table-column
        prop="address"
        label="地址"
      />
    </el-table>
    <pagination v-show="total>20" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="pagination" />
  </div>
</template>

<script>
import { getStationList } from '@/api/station'
// import { mapGetters } from 'vuex'
import Search from '@/components/Search'
import CompanySelect from '@/components/CompanySelect'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Search,
    Pagination,
    CompanySelect
  },
  data() {
    return {
      tableData: [],
      name: '',
      total: 0,
      listQuery: {
        page: 1,
        pageSize: 20
      },
      companyId: this.$store.getters.companyId
    }
  },
  computed: {
    // ...mapGetters([
    //   'companyId'
    // ])
  },
  created() {
    this.getStationList()
  },
  mounted() {
    console.log(this.$store.getters.companyId)
  },
  methods: {
    getStationList() {
      const option = {
        companyId: this.companyId,
        name: this.name,
        page: this.listQuery.page,
        pageSize: this.listQuery.pageSize
      }
      getStationList(option).then(res => {
        const { data: { data }} = res
        this.total = res.data.total
        this.tableData = data
      })
    },
    companySelectChange(companyId) {
      this.companyId = companyId
      this.getStationList()
    },
    search(name) {
      this.name = name
      this.getStationList()
    },
    pagination(page) {
      this.listQuery.page = page
      this.getStationList()
    }
  }
}
</script>
